<!--
 * @Descripttion: your project
 * @version: 1.0
 * @Author: hongweixun
 * @Date: 2023-05-18 11:38:33
 * @LastEditors: hongweixun
 * @LastEditTime: 2023-07-03 14:11:37
-->
<template>
  <el-row class="select-box">
    <el-col :span="24">
      <el-select
        :model-value="props.value"
        style="width: 100%"
        clearable
        :filterable="props.type == 'select' ? true : false"
        :placeholder="props.placeholder"
        :suffix-icon="IconDropDown"
        @change="selectChanged"
      >
        <template #prefix>
          <el-image :src="iconImg" class="img-flex-box"></el-image>
        </template>
        <el-option v-for="(item,index) in store.schoolList" :label="item.school_name" :value="item.id" :key="index"> </el-option>
      </el-select>
    </el-col>
    <!-- <el-col :span="24" class="date-opcipty-box" v-if="props.type == 'date'">
      <el-date-picker
        :model-value="props.value"
        value-format="YYYY-MM-DD"
        type="date"
        style="width: 100%;"
        class="input-class"
        @input="dateChanged"
        @change="dateChanged"
        placeholder="Pick a day"
      />
    </el-col> -->
  </el-row>
</template>
<script lang="ts" setup>
import IconDropDown from './IconDropDown.vue'
import iconImg from '../../assets/images/icon_message@2x.png'
import { PiniaStore } from '../../store/index'
interface PropsType {
  //   是否需要更多按钮
  value?: any
  type?: string
  placeholder?: string
}
const props = withDefaults(defineProps<PropsType>(), {
  value: '',
  type: 'select',
  placeholder: '输入/选择学校名称'
})
interface EmitType {
  (e: 'click', obj: any): void
}
const emit = defineEmits<EmitType>()
const store = PiniaStore()
const selectChanged = (val: any) => {
  emit('click', val)
}
</script>
<style lang="scss">
.el-input__wrapper {
  background-color: transparent;
}
.el-select-dropdown__item {
  //   color: #666 !important;
}
.input-class {
  .el-input__inner {
    width: 230px;
  }
}
// .el-picker__popper.el-popper {
//   z-index: 2011;
//   position: absolute;
//   // inset: 238px auto auto 952px!important;
//   margin: 0px;
// }
</style>
<style lang="scss" scoped>
.img-flex-box {
  display: flex;
  align-items: center;
  width: 70%;
}
.select-box {
  position: relative;
  width: 100%;
  .date-opcipty-box {
    position: absolute;
    width: 100%;
    opacity: 0;
    z-index: 2;
  }
}
</style>
